<template>
  <a-card :bordered="false" class="card-area">
    <div :class="advanced ? 'search' : null">
      <!-- 搜索区域 -->
      <a-form layout="horizontal">
        <div :class="advanced ? null: 'fold'">
          <a-row>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="法人行"
                :labelCol="{span: 5}"
                :wrapperCol="{span: 18, offset: 1}">
                <a-select
                          mode="default"
                          :allowClear="true"
                          style="width: 100%"
                          @change="handleInstChange"
                          v-model="queryParams.instId">
                  <a-select-option v-for="r in instIdData" :key="r.label">{{r.label}}-{{r.value}}</a-select-option>
                </a-select>
<!--                <a-input v-if="!this.user.admin" v-model="queryParams.instId" :value="this.user.instId"
                         readonly="readonly"/>-->
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24" v-show="queryParams.instId!=''">
              <a-form-item
                label="商户名"
                :labelCol="{span: 5}"
                :wrapperCol="{span: 18, offset: 1}">
                <a-select
                  show-search
                  placeholder="请输入代码或名称"
                  option-filter-prop="children"
                  style="width: 100%"
                  :filter-option="filterOption"
                  @focus="selectMchntNo"
                  @search="selectMchntNo"
                  v-model="queryParams.mchntNo"
                >
                  <a-select-option v-for="(d,index) in suData" :key="d.mchntNo">
                    {{ d.mchntNo }}-{{d.mchntName}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

          </a-row>
          <a-row v-show="queryParams.instId!=''">
            <a-col :md="12" :sm="24" v-show="queryParams.instId!=''">
              <a-form-item
                label="数据来源"
                :labelCol="{span: 5}"
                :wrapperCol="{span: 18, offset: 1}">
                <a-select
                  mode="default"
                  :allowClear="true"
                  style="width: 100%"
                  show-search
                  placeholder="请选择"
                  option-filter-prop="children"
                  :filter-option="filterOption"
                  v-model="queryParams.dataSources">
                  <a-select-option key="01">手工维护</a-select-option>
                  <a-select-option key="02">线上商户黑名单</a-select-option>
                  <a-select-option key="03">支付清算协会后台同步</a-select-option>
                  <a-select-option key="04">支付清算协会批量导入</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </div>
        <div style="text-align: center;margin-bottom: 10px " v-show="queryParams.instId!=''">
          <a-button type="primary" @click="search">查询</a-button>
          <a-button style="margin-left: 8px" @click="reset">重置</a-button>
        </div>
      </a-form>
    </div>
    <div v-show="queryParams.instId!=''">
      <!-- 表格区域 -->
      <div class="operator">
        <a-button v-hasPermission="['blackList:add']" ghost type="primary" @click="addMchntBlackList">新增</a-button>
        <a-button v-hasPermission="['blackList:import']" ghost type="primary" @click="uploadMchntBlackList">线上黑名单/支付清算协会批量导入</a-button>
      </div>
      <a-table ref="TableInfo"
               :columns="columns"
               :rowKey="record => record.id"
               :dataSource="dataSource"
               :pagination="pagination"
               :loading="loading"
               :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
               :scroll="{ x: 2600 }"
               @change="handleTableChange">
        <template slot="email" slot-scope="text, record">
          <a-popover placement="topLeft">
            <template slot="content">
              <div>{{text}}</div>
            </template>
            <p style="width: 150px;margin-bottom: 0">{{text}}</p>
          </a-popover>
        </template>
        <template slot="blackListOperation" slot-scope="text, record">
          <a-icon v-hasPermission="['blackList:edit']" type="setting" theme="twoTone" twoToneColor="#4a9ff5"
                  @click="editMchntBlackList(record)" title="修改"></a-icon>&nbsp;
          <a-icon v-hasPermission="['blackList:view']" type="eye" theme="twoTone" twoToneColor="#42b983"
                  @click="viewMchntBlackList(record)" title="查看"></a-icon>
          <a-badge v-hasNoPermission="['blackList:edit','blackList:view']" userStatus="warning" text="无权限"></a-badge>
        </template>

      </a-table>
      <!-- 查看 -->
      <mchnt-black-list-info
        ref="blackListInfo"
        @close="handleMchntBlackListInfoClose"
        :blackListInfoVisiable="blackListInfo.visiable">
      </mchnt-black-list-info>
      <!-- 新增 -->
      <mchnt-black-list-add
        @close="handleMchntBlackListAddClose"
        @success="handleMchntBlackListAddSuccess"
        :blackListAddVisiable="blackListAdd.visiable"
        :instId="this.queryParams.instId">
      </mchnt-black-list-add>

      <!-- 修改 -->
      <mchnt-black-list-edit
        ref="blackListEdit"
        @close="handleMchntBlackListEditClose"
        @success="handleMchntBlackListEditSuccess"
        :blackListEditVisiable="blackListEdit.visiable"
        :instId="this.queryParams.instId">
      </mchnt-black-list-edit>

      <!-- 导入 -->
      <mchnt-black-list-import
        @close="handleMchntBlackListImportClose"
        :blackListImportVisiable="blackListImport.visiable"
        :instId="this.queryParams.instId">
      </mchnt-black-list-import>
    </div>
  </a-card>
</template>

<script>
  import RangeDate from '@/components/datetime/RangeDate';
  import {mapState} from "vuex"
  import MchntBlackListAdd from "./MchntBlackListAdd";
  import MchntBlackListEdit from "./MchntBlackListEdit";
  import MchntBlackListImport from "./MchntBlackListImport";
  import MchntBlackListInfo from "./MchntBlackListInfo";

  export default {
    name: "MchntBlackList",
    components: {MchntBlackListImport, MchntBlackListEdit, MchntBlackListAdd, MchntBlackListInfo, RangeDate},
    data() {
      return {
        suData: [],
        advanced: false,
        blackListInfo: {
          visiable: false,
          data: {}
        },
        blackListAdd: {
          visiable: false
        },
        blackListEdit: {
          visiable: false
        },
        blackListImport: {
          visiable: false
        },

        queryParams: {
          instId: '',
          dataSources: '',
          mchntNo: '',
        },
        dataSource: [],
        sortedInfo: null,
        paginationInfo: null,
        selectedRowKeys: [],
        pagination: {
          pageSizeOptions: ['10', '20', '30', '40', '100'],
          defaultCurrent: 1,
          defaultPageSize: 10,
          showQuickJumper: true,
          showSizeChanger: true,
          showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
        },
        loading: false,
        instIdData: [],
        da: []
      }
    },
    computed: {
      ...mapState({
        user: state => state.account.user,

      }),
      columns() {
        let {sortedInfo} = this
        sortedInfo = sortedInfo || {}
        let {filteredInfo} = this
        filteredInfo = filteredInfo || {}
        return [{
          title: '银行代码',
          dataIndex: 'instId',
          scopedSlots: {customRender: 'instId'},
        }, {
          title: '商户号',
          dataIndex: 'mchntNo',
          scopedSlots: {customRender: 'mchntNo'},
        }, {
          title: '商户名称',
          dataIndex: 'mchntName',
          scopedSlots: {customRender: 'mchntName'},
        }, {
          title: '法人代表',
          dataIndex: 'artifName',
          scopedSlots: {customRender: 'artifName'},
        }, {
          title: '法人代表证件类型',
          dataIndex: 'artifCertType',
          customRender: (text, row, index) => {
            switch (text) {
              case '00':
                return <a-tag color = "pink" > 其他 < /a-tag>
              case '01':
                return <a-tag color = "pink" > 身份证 < /a-tag>
              case '02':
                return <a-tag color = "pink" > 军官证 < /a-tag>
              case '03':
                return <a-tag color = "pink" > 护照 < /a-tag>
              case '04':
                return <a-tag color = "pink" > 户口簿 < /a-tag>
              case '05':
                return <a-tag color = "pink" > 士兵证 < /a-tag>
              case '06':
                return <a-tag color = "pink" > 港澳来往内地通行证 < /a-tag>
              case '07':
                return <a-tag color = "pink" > 台湾同胞来往内地通行证 < /a-tag>
              case '08':
                return <a-tag color = "pink" > 临时身份证 < /a-tag>
              case '09':
                return <a-tag color = "pink" > 外国人居留证 < /a-tag>
              case '10':
                return <a-tag color = "pink" > 警官证 < /a-tag>

              default:
                return text
            }
          },
          filters: [
            {text: '其他', value: '99'},
            {text: '身份证', value: '01'},
            {text: '军官证', value: '02'},
            {text: '护照', value: '03'},
            {text: '户口簿', value: '04'},
            {text: '士兵证', value: '05'},
            {text: '港澳来往内地通行证', value: '06'},
            {text: '台湾同胞来往内地通行证', value: '07'},
            {text: '临时身份证', value: '08'},
            {text: '外国人居留证', value: '09'},
            {text: '警官证', value: '10'},
          ],
          filterMultiple: false,
          filteredValue: filteredInfo.artifCertType || null,
          onFilter: (value, record) => record.artifCertType.includes(value)
        }, {
          title: '法人代表证件号',
          dataIndex: 'artifCertNo',
          scopedSlots: {customRender: 'artifCertNo'},
        }, {
          title: '商户证件类型',
          dataIndex: 'licenceType',
          customRender: (text, row, index) => {
            switch (text) {
              case '00':
                return <a-tag color = "pink" > 其他 < /a-tag>
              case '01':
                return <a-tag color = "pink" > 营业执照编码 < /a-tag>
              case '02':
                return <a-tag color = "pink" > 统一社会信息代码 < /a-tag>
              case '03':
                return <a-tag color = "pink" > 组织机构代码证 < /a-tag>
              case '04':
                return <a-tag color = "pink" > 经营许可证 < /a-tag>
              case '05':
                return <a-tag color = "pink" > 税务登记证 < /a-tag>
              default:
                return text
            }
          },
          filters: [
            {text: '其他', value: '99'},
            {text: '营业执照编码', value: '01'},
            {text: '统一社会信息代码', value: '02'},
            {text: '组织机构代码证', value: '03'},
            {text: '经营许可证', value: '04'},
            {text: '税务登记证', value: '05'},
          ],
          filterMultiple: false,
          filteredValue: filteredInfo.licenceType || null,
          onFilter: (value, record) => record.licenceType.includes(value)
        }, {
          title: '商户证件号码',
          dataIndex: 'licenceCode',
          scopedSlots: {customRender: 'licenceCode'},
        }, {
          title: '风险信息等级',
          dataIndex: 'riskGrade',
          customRender: (text, row, index) => {
            switch (text) {
              case '01':
                return <a-tag color = "cyan" > 一级 < /a-tag>
              case '02':
                return <a-tag color = "pink" > 二级 < /a-tag>
              case '03':
                return <a-tag color = "pink" > 三级 < /a-tag>
              default:
                return text
            }
          },
          filters: [
            {text: '一级', value: '01'},
            {text: '二级', value: '02'},
            {text: '三级', value: '03'}
          ],
          filterMultiple: false,
          filteredValue: filteredInfo.riskGrade || null,
          onFilter: (value, record) => record.riskGrade.includes(value)
        }, {
          title: '风险类型',
          dataIndex: 'riskType',
          customRender: (text, row, index) => {
            switch (text) {
              case '11':
                return <a-tag color = "pink" > 移机 < /a-tag>
              case '99':
                return <a-tag color = "cyan" > 其他 < /a-tag>
              case '01':
                return <a-tag color = "pink" > 虚假申请 < /a-tag>
              case '12':
                return <a-tag color = "pink" > 高风险商户 < /a-tag>
              case '02':
                return <a-tag color = "pink" > 套现、积分 < /a-tag>
              case '13':
                return <a-tag color = "cyan" > 商户合谋欺诈 < /a-tag>
              case '03':
                return <a-tag color = "pink" > 违法经营 < /a-tag>
              case '14':
                return <a-tag color = "pink" > 破产或停业商户 < /a-tag>
              case '04':
                return <a-tag color = "pink" > 销赃 < /a-tag>
              case '15':
                return <a-tag color = "cyan" > 强迫签单 < /a-tag>
              case '05':
                return <a-tag color = "pink" > 买卖或租借银行（支付）账户 < /a-tag>
              case '06':
                return <a-tag color = "pink" > 侧录点 < /a-tag>
              case '17':
                return <a-tag color = "pink" > 频繁变更服务机构 < /a-tag>
              case '07':
                return <a-tag color = "cyan" > 伪卡集中使用点 < /a-tag>
              case '18':
                return <a-tag color = "pink" > 关联商户涉险 < /a-tag>
              case '08':
                return <a-tag color = "pink" > 泄露账户及交易信息 < /a-tag>
              case '19':
                return <a-tag color = "pink" > 买卖银行卡信息 < /a-tag>
              case '09':
                return <a-tag color = "pink" > 恶意倒闭 < /a-tag>
              case '20':
                return <a-tag color = "cyan" > 拒刷信用卡 < /a-tag>
              case '10':
                return <a-tag color = "pink" > 恶意分单 < /a-tag>
              case '21':
                return <a-tag color = "pink" > 转嫁手续费 < /a-tag>
              default:
                return text
            }
          },
          filters: [
            {text: '移机', value: '11'},
            {text: '其他', value: '99'},
            {text: '虚假申请', value: '01'},
            {text: '高风险商户', value: '12'},
            {text: '套现、积分', value: '02'},
            {text: '商户合谋欺诈', value: '13'},
            {text: '违法经营', value: '03'},
            {text: '破产或停业商户', value: '14'},
            {text: '销赃', value: '04'},
            {text: '强迫签单', value: '15'},
            {text: '买卖或租借银行（支付）账户', value: '05'},
            {text: '侧录点', value: '06'},
            {text: '频繁变更服务机构', value: '17'},
            {text: '伪卡集中使用点', value: '07'},
            {text: '关联商户涉险', value: '18'},
            {text: '泄露账户及交易信息', value: '08'},
            {text: '买卖银行卡信息', value: '19'},
            {text: '恶意倒闭', value: '09'},
            {text: '拒刷信用卡', value: '20'},
            {text: '恶意分单', value: '10'},
            {text: '转嫁手续费', value: '21'},
          ],
          filterMultiple: false,
          filteredValue: filteredInfo.riskType || null,
          onFilter: (value, record) => record.riskType.includes(value)
        }, {
          title: '商户类型',
          dataIndex: 'enterRegisterType',
          customRender: (text, row, index) => {
            switch (text) {
              case '01':
                return <a-tag color = "pink" > 自然人 < /a-tag>
              case '02':
                return <a-tag color = "pink" > 企业商户 < /a-tag>
              case '03':
                return <a-tag color = "pink" > 个体工商户 < /a-tag>
              default:
                return text
            }
          },
          filters: [
            {text: '自然人', value: '01'},
            {text: '企业商户', value: '02'},
            {text: '个体工商户', value: '03'},
          ],
          filterMultiple: false,
          filteredValue: filteredInfo.enterRegisterType || null,
          onFilter: (value, record) => record.enterRegisterType.includes(value)
        }, {
          title: '风险事件发生地域',
          dataIndex: 'riskOccurArea',
          scopedSlots: {customRender: 'riskOccurArea'},
        }, {
          title: '数据来源',
          dataIndex: 'dataSources',
          customRender: (text, row, index) => {
            switch (text) {
              case '01':
                return <a-tag color = "pink" > 手工维护 < /a-tag>
              case '02':
                return <a-tag color = "cyan" > 线上商户黑名单 < /a-tag>
              case '03':
                return <a-tag color = "pink" > 支付清算协会后台同步 < /a-tag>
              case '04':
                return <a-tag color = "pink" > 支付清算协会批量导入 < /a-tag>
              default:
                return text
            }
          },
          filters: [
            {text: '手工维护', value: '01'},
            {text: '线上商户黑名单', value: '02'},
            {text: '支付清算协会后台同步', value: '03'},
            {text: '支付清算协会批量导入', value: '04'}
          ],
          filterMultiple: false,
          filteredValue: filteredInfo.dataSources || null,
          onFilter: (value, record) => record.dataSources.includes(value)
        }, {
          title: '状态',
          dataIndex: 'validStatus',
          customRender: (text, row, index) => {
            switch (text) {
              case '00':
                return <a-tag color = "pink" > 非正式 < /a-tag>
              case '01':
                return <a-tag color = "cyan" > 正式 < /a-tag>
              case '02':
                return <a-tag color = "pink" > 停用 < /a-tag>
              case '03':
                return <a-tag color = "pink" > 已注销 < /a-tag>
              default:
                return text
            }
          },
          filters: [
            {text: '非正式', value: '00'},
            {text: '正式', value: '01'},
            {text: '停用', value: '02'},
            {text: '已注销', value: '03'}
          ],
          filterMultiple: false,
          filteredValue: filteredInfo.status || null,
          onFilter: (value, record) => record.validStatus.includes(value)
        }, {
          title: '审核状态',
          dataIndex: 'auditStatus',
          customRender: (text, row, index) => {
            switch (text) {
              case '00':
                return <a-tag color = "cyan" > 待提交审批 < /a-tag>
              case '01':
                return <a-tag color = "pink" > 新增-审批流程中 < /a-tag>
              case '02':
                return <a-tag color = "pink" > 新增-审批通过 < /a-tag>
              case '03':
                return <a-tag color = "pink" > 新增-审批拒绝 < /a-tag>
              case '11':
                return <a-tag color = "cyan" > 注销-审批流程中 < /a-tag>
              case '12':
                return <a-tag color = "pink" > 注销-审批通过 < /a-tag>
              case '13':
                return <a-tag color = "pink" > 注销-审批拒绝 < /a-tag>
              case '21':
                return <a-tag color = "pink" > 停用-审批流程中 < /a-tag>
              case '22':
                return <a-tag color = "cyan" > 停用-审批通过 < /a-tag>
              case '23':
                return <a-tag color = "pink" > 停用-审批拒绝 < /a-tag>
              case '31':
                return <a-tag color = "pink" > 启用-审批流程中 < /a-tag>
              case '32':
                return <a-tag color = "pink" > 启用-审批通过 < /a-tag>
              case '33':
                return <a-tag color = "cyan" > 启用-审批拒绝 < /a-tag>
              case '41':
                return <a-tag color = "pink" > 修改-审批流程中 < /a-tag>
              case '42':
                return <a-tag color = "pink" > 修改-审批通过 < /a-tag>
              case '43':
                return <a-tag color = "pink" > 修改-审批拒绝 < /a-tag>
              default:
                return text
            }
          },
          filters: [
            {text: '待提交审批', value: '00'},
            {text: '新增-审批流程中', value: '01'},
            {text: '新增-审批通过', value: '02'},
            {text: '新增-审批拒绝', value: '03'},
            {text: '注销-审批流程中', value: '11'},
            {text: '注销-审批通过', value: '12'},
            {text: '注销-审批拒绝', value: '13'},
            {text: '停用-审批流程中', value: '21'},
            {text: '停用-审批通过', value: '22'},
            {text: '停用-审批拒绝', value: '23'},
            {text: '启用-审批流程中', value: '31'},
            {text: '启用-审批通过', value: '32'},
            {text: '启用-审批拒绝', value: '33'},
            {text: '修改-审批流程中', value: '41'},
            {text: '修改-审批通过', value: '42'},
            {text: '修改-审批拒绝', value: '43'}
          ],
          filterMultiple: false,
          filteredValue: filteredInfo.auditStatus || null,
          onFilter: (value, record) => record.auditStatus.includes(value)
        }, {
          title: '操作',
          dataIndex: 'blackListOperation',
          fixed: 'right',
          scopedSlots: {customRender: 'blackListOperation'}
        }]
      }
    },
    mounted() {
      this.$get('admin/upmporg/getInstList').then((r) => {
        this.instIdData = r.data
      })
    },
    methods: {
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      selectMchntNo(val) {
        this.suData = []
        let param = {}
        if (val) {
          param = {
            q: encodeURIComponent(val + `&${this.queryParams.instId}`),
            pageSize: 20
          }
          if (val.length >= 5) {
            this.$get('admin/mcmp/bMchntBaseInfo/mchntFormalSelect2List', param).then((r) => {
              let result = r.data.rows
              result.forEach(r => {
                this.suData.push(r);
              })
            })
          }
        } else {
          param = {
            q: encodeURIComponent(`&${this.queryParams.instId}`),
            pageSize: 20
          }
          this.$get('admin/mcmp/bMchntBaseInfo/mchntFormalSelect2List', param).then((r) => {
            let result = r.data.rows
            result.forEach(r => {
              this.suData.push(r);
            })
          })
        }
      },

      onSelectChange(selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys
      },

      handleInstChange(value) {
        this.queryParams.instId = value;
        if (value != "") {
          let params = {}
          params.instId = value;
          this.$get('/admin/merParam/mchntBlackListInfo', {...params}).then((r) => {
            this.dataSource = r.data.rows;
            this.search();
          })
        }
      },

      handleMchntBlackListEditClose() {
        this.blackListEdit.visiable = false
      },
      handleMchntBlackListEditSuccess() {
        this.blackListEdit.visiable = false
        this.$message.success('修改成功')
        this.search()
      },

      handleMchntBlackListImportClose() {
        this.blackListImport.visiable = false
        this.search()
      },

      handleMchntBlackListAddClose() {
        this.blackListAdd.visiable = false
      },
      handleMchntBlackListAddSuccess() {
        this.blackListAdd.visiable = false
        this.$message.success('添加成功')
        this.search()
      },


      viewMchntBlackList(record) {
        this.selectPrvncName(record)
        this.selectCityName(record)
        var termAddrPrvnc = record.riskOccurArea.split('/');
        record.termAddrPrvnc = termAddrPrvnc[0]
        record.termAddrCity = termAddrPrvnc[1]
        setTimeout(() => {
          this.$refs.blackListInfo.setMchntBlackListFormValues(record)
        }, 1000);
        this.blackListInfo.visiable = true
      },
      handleMchntBlackListInfoClose() {
        this.blackListInfo.visiable = false
      },
      editMchntBlackList(record) {
        this.selectPrvncName(record)
        this.selectCityName(record)
        var termAddrPrvnc = record.riskOccurArea.split('/');
        record.termAddrPrvnc = termAddrPrvnc[0]
        record.termAddrCity = termAddrPrvnc[1]
        if (record.status === '02' ) {
          this.$message.warning('停用的数据不允许再停用')
        } else {
          setTimeout(() => {
            this.$refs.blackListEdit.setMchntBlackListFormValues(record)
          }, 1000);
          this.blackListEdit.visiable = true
        }
      },

      selectPrvncName(record) {
        if(record.riskOccurArea){
          let riskOccurArea=record.riskOccurArea.split('/')
          let q=riskOccurArea[0]
          let l = '01'
          this.$get('/admin/merParam/regionInfo/select3', {q:q, l: l}).then((r) => {
            record.termAddrPrvnc = r.data.regionName
          })
        }
      },
      selectCityName(record) {
        if(record.riskOccurArea){
          let riskOccurArea=record.riskOccurArea.split('/')
          let p=riskOccurArea[0]
          let q=riskOccurArea[1]
          let l = '02'
          this.$get('/admin/merParam/regionInfo/select3', {q:q, p: p, l: l}).then((r) => {
            record.termAddrCity = r.data.regionName
          })
        }
      },


      addMchntBlackList() {
        this.blackListAdd.visiable = true
      },
      uploadMchntBlackList() {
        this.blackListImport.visiable = true
      },

      search() {
        this.$refs.TableInfo.pagination.current = this.pagination.defaultCurrent
        if (this.paginationInfo) {
          this.paginationInfo.current = this.pagination.defaultCurrent
          this.paginationInfo.pageSize = this.pagination.defaultPageSize
        }

        this.$refs.TableInfo.pagination.current = this.pagination.defaultCurrent
        if (this.paginationInfo) {
          this.paginationInfo.current = this.pagination.defaultCurrent
          this.paginationInfo.pageSize = this.pagination.defaultPageSize
        }

        let {sortedInfo, filteredInfo} = this
        let sortField, sortOrder
        // 获取当前列的排序和列的过滤规则
        if (sortedInfo) {
          sortField = sortedInfo.field
          sortOrder = sortedInfo.order
        }
        let params = this.queryParams

        this.fetch({
          sortField: sortField,
          sortOrder: sortOrder,
          ...params,
          ...filteredInfo
        })
      },
      reset() {
        // 取消选中
        this.selectedRowKeys = []
        // 重置分页
        this.$refs.TableInfo.pagination.current = this.pagination.defaultCurrent
        if (this.paginationInfo) {
          this.paginationInfo.current = this.pagination.defaultCurrent
          this.paginationInfo.pageSize = this.pagination.defaultPageSize
        }
        // 重置列排序规则
        this.sortedInfo = null
        // 重置查询参数
        this.queryParams = {}
        // // 清空时间选择
        // this.$refs.createTime.reset()
        this.fetch()
      },
      handleTableChange(pagination, filters, sorter) {
        // 将这三个参数赋值给Vue data，用于后续使用
        this.paginationInfo = pagination
        this.filteredInfo = filters
        this.sortedInfo = sorter
        // this.userInfo.visiable = false

        this.fetch({
          sortField: sorter.field,
          sortOrder: sorter.order,
          ...this.queryParams,
          ...filters
        })
      },
      fetch(params = {}) {
        this.loading = true
        if (this.paginationInfo) {
          // 如果分页信息不为空，则设置表格当前第几页，每页条数，并设置查询分页参数
          this.$refs.TableInfo.pagination.current = this.paginationInfo.current
          this.$refs.TableInfo.pagination.pageSize = this.paginationInfo.pageSize
          params.pageSize = this.paginationInfo.pageSize
          params.pageNum = this.paginationInfo.current
        } else {
          // 如果分页信息为空，则设置为默认值
          params.pageSize = this.pagination.defaultPageSize
          params.pageNum = this.pagination.defaultCurrent
        }
        this.$get('/admin/merParam/mchntBlackListInfo', {
          ...params
        }).then((r) => {
          let data = r.data
          const pagination = {...this.pagination}
          pagination.total = data.total
          this.dataSource = data.rows
          this.pagination = pagination
          this.loading = false
        })
      },
    }
  }
</script>

<style lang="less" scoped>
  @import "../../../../../../static/less/Common";
</style>

